<template>
  <div>
    <div
      class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
      style="height:300px;overflow:auto"
      id="dialogue_box"
    >
      <h2 class="sub-header">信息列表</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>爱好</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in students" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.gender == 0 ? '男':'女' }}</td>
              <td>{{ item.age}}</td>
              <td>{{ item.hobbies }}</td>
              <td>{{ item.time | dateFormat }}</td>
              <td>
                <!-- <router-link to="edit" class="btn btn-primary btn-sm" :thisStudent="student">编辑</router-link> -->
                <a class="btn btn-danger btn-sm" @click="deleteStudent(item.id,item)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h2 class="sub-header">添加信息</h2>
      <div class="form-group">
        <label for>姓名</label>
        <input
          type="text"
          class="form-control"
          id
          name="name"
          required
          minlength="2"
          maxlength="10"
          placeholder="请输入姓名"
          v-model="student.name"
        />
      </div>
      <div class="form-group">
        <label for>性别</label>
        <div>
          <label class="radio-inline">
            <input type="radio" :checked="true" name="gender" value="0" v-model="student.gender" /> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" value="1" v-model="student.gender" /> 女
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for>年龄</label>
        <input
          class="form-control"
          type="number"
          id
          name="age"
          required
          min="1"
          max="150"
          placeholder="请输入年龄"
          v-model="student.age"
        />
      </div>
      <div class="form-group">
        <label for>爱好</label>
        <input
          class="form-control"
          type="text"
          v-model="student.hobbies"
          id
          name="hobbies"
          placeholder="请输入爱好"
        />
      </div>
      <button @click="doSubmit" class="btn btn-primary">提交</button>
      <router-link class="btn btn-danger" to="/students">取消</router-link>
    </div>
  </div>
</template>
<script>
import { Toast, Indicator } from "mint-ui";
import {
  addStudentData,
  deleteStudentData,
  getStudentData,
  getHistoryData
} from "@/apis/data";
export default {
  data() {
    return {
      student: { gender: 0 },
      students: []
    };
  },
  methods: {
    getStudents() {
      getStudentData().then(res => {
        this.students = res.data[0];
      });
    },
    getStudentsHistory() {
      getHistoryData().then(res => {
        this.studentHistorys = res.data;
      });
    },
    doSubmit(e) {
      addStudentData(this.student)
        .then(response => {
          var code = response.data;
          if (code.err_code == 5) {
            Toast({
              message: "姓名长度必须为2到10位",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 1) {
            Toast({
              message: "姓名不能为空！",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 2) {
            Toast({
              message: "爱好不能为空！",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 3) {
            Toast({
              message: "年龄不能为空！",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 4) {
            Toast({
              message: "性别错误！",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 0) {
            // this.student = { gender: 0 };
            Toast({
              message: "添加信息成功！",
              position: "middle",
              duration: 600,
              iconClass: "glyphicon glyphicon-ok"
            });
            this.getStudents();
          } else if (code.err_code == 6) {
            Toast({
              message: "年龄必须为数字",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 7) {
            Toast({
              message: "年龄必须为0到150岁之间",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          } else if (code.err_code == 8) {
            Toast({
              message: "爱好不能少于四位",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-remove"
            });
          }
        })
        .catch(function() {
          Toast({
            message: "服务器异常",
            position: "middle",
            duration: 1000,
            iconClass: "glyphicon glyphicon-remove"
          });
        });
      
    },
    deleteStudent(studentID, student) {
      Indicator.open();
      var formData = student;
      this.$http.post("/history/new", formData).then(response => {
        if (response.body.code == 0) {
          this.getStudentsHistory();
        } else {
          Toast({
            message: "失败！",
            position: "middle",
            duration: 1000,
            iconClass: "glyphicon glyphicon-ok"
          });
        }
        this.getStudentsHistory();
      });
      var id = parseInt(studentID);
      deleteStudentData(id).then(response => {
        this.getStudents();
        Indicator.close();
      });
    }
  },
  updated: function() {
    this.$nextTick(function() {
      var div = document.getElementById("dialogue_box");
      div.scrollTop = div.scrollHeight;
    });
  },
  created() {
    this.getStudents();
  }
};
</script>
<style>
</style>
